{% extends '__base__.html' %}

{% block title %}数据库{% endblock %}
{% block content %}
<div class="container">
  <div class="row">
    <div id="execute" class="col-md-8">
      <div class="form-group">
        <label for="sql">Sql</label>
        <textarea class="form-control" id="sql" name="sql" rows="3"></textarea>
      </div>
      <button class="btn btn-primary">Execute</button>
    </div>
  </div>
  <div class="row">
    <div id="show" class="col-md-8">
      <div class="form-group">
        <textarea class="form-control" rows="5"></textarea>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block beforebody %}
<script>
  document.querySelector('#execute button').addEventListener('click', function (event) {
    sql = event.target.parentNode.querySelector('textarea[name="sql"]').value
    axios.post('/database/execute', {
      sql: sql,
    })
      .then(function (response) {
        // console.log(response);
        if (response.status === 200) {
          let data = response.data
          if (data['code'] === 0) {
            console.log('SUCCESS: ' + data['msg'])
          } else {
            console.log('FAILED: ' + data['msg'])
          }
          document.querySelector('#show textarea').innerHTML = data['msg']
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  })

  axios.post('/database/test', {
    sql: 'hello',
  })
    .then(function (response) {
      // console.log(response);
      if (response.status === 200) {
        let data = response.data
        if (data['code'] === 0) {
          console.log('SUCCESS: ' + data['msg'])
        } else {
          console.log('FAILED: ' + data['msg'])
        }
      }
    })
    .catch(function (error) {
      console.log(error);
    });
</script>
{% endblock %}